import React, { useRef, useState, useEffect } from "react";
import { json, useNavigate } from "react-router-dom";
import { Search, Tabbar, Stepper, Button } from "react-vant";
import { SearchBar, Toast, Swiper, Badge, Checkbox, Space } from "antd-mobile";
import styles from "./customer.module.css";
import imgs from "../assets/img17140018ac50ac908.png";
// import imgss from '../assets/img85915d870f82d8.jpg';
import oneImg from "../assets/img17169918ac682a7b0.png";
import twoImg from "../assets/img17170418ac6836b00.png";
import threeImg from "../assets/img17170518ac68395f8.png";
import fourImg from "../assets/img17499418acc4c92c8.png";
import aimg from "../assets/img17140218ac5183688.png";
import bimg from "../assets/img17140518ac5219110.png";
import cing from "../assets/img17141418ac52bf150.png";
import dimg from "../assets/img17140718ac5222198.png";
import leftImg from "../assets/爱心.png";
import eimg from "../assets/img17140818ac5223908.png";
import { Cart, WapHomeO, Bars, Manager } from "@react-vant/icons";
import { homes } from "../api/home";
import { info } from "../api/index";
// import errimg from "../assets/F1DF18154E54FBEDCBEF307E3777AC11.jpg"
export default function Personage() {
  let navigate = useNavigate();
  const [array, setArray] = useState(null);
  const [infoUser, setInfo] = useState([]);
  function jump(targetPage) {
    navigate(targetPage);
  }
  useEffect(() => {
    homes().then((res) => {
      setArray(res.data);
    });
    console.log(array);
  }, []);
  let dysID = sessionStorage.getItem("dys");

  useEffect(() => {
    info({ id: 1 }).then((res) => {
      setInfo(res.info);
      console.log(infoUser);
      console.log(res);
    });
  }, []);
  function yyy() {
    navigate("/Order", {});
  }
  // // 图片替换
  // const handleImageError = (event) => {
  //   event.target.onerror = null;
  //   event.target.src = errimg;
  // };
  return (
    <div>
      <div className={styles.head}>
        <img src={imgs} alt="" className={styles.tg} />
        <div className={styles.ge}>
          <img src={infoUser.avatars} alt="" className={styles.kb} />
          <div style={{ textAlign: "center" }}>
            <span>{infoUser.name}</span>
            <div className={styles.gxx}>
              <span>ID:</span>
              <span className={styles.iid}>{infoUser.id}</span>
            </div>
          </div>
        </div>
      </div>
      <div className={styles.yu}>
        <div className={styles.yuChild} style={{ textAlign: "center" }}>
          <span style={{ marginLeft: "-10%" }}>￥{infoUser.trading}</span>
          <p style={{ fontSize: "14px" }}>余额（元）</p>
        </div>
        <div className={styles.shouChild}>
          <span style={{ marginLeft: " 2%" }}>￥{infoUser.profit}</span>
          <p style={{ fontsize: "14px" }}>可用收益（元）</p>
        </div>
        <div className={styles.keChild}>
          <span style={{ marginLeft: "5%" }}>￥{infoUser.profit_all}</span>
          <p style={{ fontSize: "14px" }}>总收益（元）</p>
        </div>
      </div>
      <div className={styles.to}>
        <div className={styles.toTo}>
          <span style={{ fontSize: "20px" }}>我的订单</span>
          <span style={{ fontSize: " 12px", color: " #A6BAD4" }} onClick={yyy}>
            全部订单
          </span>
        </div>
        <div className={styles.toCen}>
          <div className={styles.toChild}>
            <img src={aimg} alt="" style={{ width: "30%" }} />
            <p>待付款</p>
          </div>
          <div className={styles.toChild}>
            <img src={bimg} alt="" style={{ width: "30%" }} />
            <p>待付款</p>
          </div>
          <div className={styles.toChild}>
            <img src={cing} alt="" style={{ width: "30%" }} />
            <p>待付款</p>
          </div>
          <div className={styles.toChild}>
            <img src={dimg} alt="" style={{ width: "30%" }} />
            <p>待付款</p>
          </div>
          <div className={styles.toChild}>
            <img src={eimg} alt="" style={{ width: "30%" }} />
            <p>待付款</p>
          </div>
        </div>
      </div>
      <div className={styles.das}>
        <div className={styles.daHead} style={{ fontSize: "20px" }}>
          我的服务
        </div>
        <div className={styles.daCen}>
          <div className={styles.daChild}>
            <img src={oneImg} alt="" style={{ width: "30%" }} />
            <p>我的钱包</p>
          </div>
          <div className={styles.daChild}>
            <img src={twoImg} alt="" style={{ width: "30%" }} />
            <p>分销中心</p>
          </div>
          <div className={styles.daChild}>
            <img src={threeImg} alt="" style={{ width: "30%" }} />
            <p>收货地址</p>
          </div>
          <div className={styles.daChild}>
            <img src={fourImg} alt="" style={{ width: "30%" }} />
            <p>邀请好友</p>
          </div>
        </div>
      </div>
      <div className={styles.center}>
        <img src={leftImg} alt="" className={styles.leftImg} />
        猜你喜欢
        <img src={leftImg} alt="" className={styles.leftImg} />
      </div>
      <div className={styles.scroll}>
        {array?.goods.map((item, index) => (
          <div className={styles.scrollChild}>
            <img src={item.imgs} alt="" className={styles.imge} />
            <div>{item.name}</div>
            <div className={styles.constadd}>
              ￥{item.price}
              <button className={styles.add}>+</button>
            </div>
          </div>
        ))}
        <div className={styles.scrollChild}></div>
      </div>
      <div className={styles.footer}>
        <Tabbar
          activeColor="blue"
          inactiveColor="#000000"
          defaultValue="personage"
        >
          <Tabbar.Item
            icon={<WapHomeO />}
            onClick={() => jump("/Home")}
            name="Home"                           
          >
            首页
          </Tabbar.Item>
          <Tabbar.Item
            icon={<Bars />}
            onClick={() => jump("/Qaxonomi")}
            name="Qaxonomi"
          >
            分类
          </Tabbar.Item>
          <Tabbar.Item
            icon={<Cart />}
            onClick={() => jump("/ShoppingCart")}
            name="ShoppingCart"
          >
            购物车
          </Tabbar.Item>
          <Tabbar.Item
            icon={<Manager />}
            name="Customers"
            onClick={() => jump("/Customers")}
          >
            我的
          </Tabbar.Item>
        </Tabbar>
        77
      </div>
    </div>
  );
}
